<template>
<!-- 用户认证 -->
  <div class='auth-wrapper'>
    <div class="tips">注意：您尚未进行交易商认证，交易商认证后，可开展服务发布、委托采购等业务</div>
    <div class="type-item" @click="goToAuthentication('1')">
      <i class="iconfont typy-icon">&#xe638;</i>
      <div class="content">
        <h4>企业交易商</h4>
        <p>企业自主注册或普通用户认证，通过后台审核后，成为企业交易商，可开展服务发布、委托采购等业务。</p>
        <b class="type-status">{{ handleAuth('1') }}</b>
      </div>
    </div>
    <div class="type-item" @click="goToAuthentication('2')">
      <i class="iconfont typy-icon">&#xe670;</i>
      <div class="content">
        <h4>个人交易商</h4>
        <p>个人自主注册或普通用户认证，通过后台审核后，成为个人交易商，可开展服务发布、委托采购等业务。</p>
        <b class="type-status">{{ handleAuth('2') }}</b>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Authentication",

  data() {
    return {
      authTypeOption: [],
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.xbsgUserInfo;
    },
  },
  created() {
    this.getDicts('auth_state').then(response => {
      this.authTypeOption = response.data
    });
  },
  methods:{
    handleAuth (type) {
      let auth = '未认证'
      if (this.userInfo.type === type) {
        auth = '已认证'
      } else if (this.userInfo.authType === type)  {
        auth = this.authTypeOption.filter(item => item.dictValue === type)[0].dictLabel || '未认证'
      }
      return auth
    },
    goToAuthentication (type) {
      this.$emit('authentication', type)
    }
  }
};
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.tips {
  color: $redColor;
  line-height: 24px;
}
.type-item {
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 40px;
  display: flex;
  cursor: pointer;
}
.typy-icon {
  width: 100px;
  color: $blackColor;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
}
.content {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
}
.type-status {
  position: absolute;
  top: 10px;
  right: 10px;
  color: $blueColor;
}
</style>
